<template>
	<div id="userAanlysis">
		<v-head></v-head>
		<v-left></v-left>

		<div class="list">
			<el-row>
				<el-col :span="12" style="padding-right:10px;">
					<div id="box1">
						<vue-highcharts :options="options_gender" ref="pieChart_1"></vue-highcharts>
						<div class="nodata" v-if="showInfo2">无数据</div>
					</div>
				</el-col>
				<el-col :span="12" style="padding-left:10px;">
					<div id="box2">
						<vue-highcharts :options="options_grade" ref="pieChart_2"></vue-highcharts>
						<div class="nodata" v-if="showInfo3">无数据</div>
					</div>
				</el-col>
			</el-row>
			<el-row v-if="user.uniName !== '万航'">
				<el-col :span="12">
					<div id="box3">
						<vue-highcharts :options="options_campus" ref="pieChart_3"></vue-highcharts>
						<div class="nodata" v-if="showInfo1">无数据</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vHead from "../common/Header.vue";
	import vFooter from "../common/Footer.vue";
	import vLeft from "./leftSide.vue";

	export default {
		data() {
			return {
				showInfo1: false,
				showInfo2: false,
				showInfo3: false,
				options_campus: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: [
						"#e84c3d",
						"#eaeda1",
						"#ea505d",
						"#227cb5",
						"#1abc9c",
						"#80e5f6",
						"#d8e00b"
					],
					title: {
						text: "校区区分",
						align: 'left',
						style: {
							"fontSize": "14px"
						}
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					series: [],
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					}
				},
				options_gender: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: [
						"#e84c3d",
						"#eaeda1",
						"#ea505d",
						"#227cb5",
						"#1abc9c",
						"#80e5f6",
						"#d8e00b"
					],
					title: {
						text: "性别区分",
						align: 'left',
						style: {
							"fontSize": "14px"
						}
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					series: [],
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					}
				},
				options_grade: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: [
						"#e84c3d",
						"#eaeda1",
						"#ea505d",
						"#227cb5",
						"#1abc9c",
						"#80e5f6",
						"#d8e00b"
					],
					title: {
						text: "年级区分",
						align: 'left',
						style: {
							"fontSize": "14px"
						}
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					series: [],
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					}
				}
			};
		},
		components: {
			vHead,
			vFooter,
			vLeft
		},
		mounted() {
			let sections = document.getElementById("section_box").children;
			let logo_left = document.getElementsByClassName("logo-left")[0];
			let header = document.getElementById('header');
			let random = document.querySelector(".random");
			logo_left.style.background = "#fff";
			random.style.boxShadow = "0px 0px 0px 0px rgba(0, 0, 0, 0.5)";
			header.style.boxShadow = "0px 1px 4px 0px rgba(0, 0, 0, 0.5)";
			sections[2].className = "item_active";
			document.getElementsByClassName('head_img')[0].src = "../../../static/img/dataAnalysis_icon_blue.png";
			this.pieChart();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			// 扇形图
			pieChart() {
				let url = this.$util.domain + "/dataPlatForm/user/regist/data";
				let dataArray_gender = [],
					dataArray_grade = [],
					dataArray_campus = [];
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					let campusList, genderList, yearList;
					let pieChart_1 = this.$refs.pieChart_1; //性别
					let pieChart_2 = this.$refs.pieChart_2; //年级
					let pieChart_3 = this.$refs.pieChart_3; //校区
					if (response.data.error == 10000) {
						if (response.data.data) {
							campusList = response.data.data.campusNum;
							genderList = response.data.data.genderNum;
							yearList = response.data.data.yearNum;
						}
						pieChart_1.removeSeries();
						pieChart_2.removeSeries();
						genderList ? genderList.forEach(item => {
							item.first = item.first === 0 ? "女" : "男";
							dataArray_gender.push([item.first, item.second]);
						}) : null;
						yearList ? yearList.forEach(item => {
							dataArray_grade.push([item.first + "级", item.second]);
						}) : null;
						campusList ? campusList.forEach(item => {
							dataArray_campus.push([item.first, item.second]);
						}) : null;

						pieChart_1.addSeries({
							type: "pie",
							name: "",
							innerSize: '80%',
							data: dataArray_gender
						});

						pieChart_2.addSeries({
							type: "pie",
							name: "",
							innerSize: '80%',
							data: dataArray_grade
						});
						if (this.user.uniName == "万航") {
							return false;
						}
						pieChart_3.removeSeries();
						pieChart_3.addSeries({
							type: "pie",
							name: "",
							innerSize: '80%',
							data: dataArray_campus
						});
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			}
		}
	};
</script>

<style>
	#userAanlysis {
		padding-bottom: 40px;
		height: calc(100% - 60px);
		background: #f0f3f4;
	}

	#userAanlysis .list {
		width: calc(100% - 290px);
		margin-left: 220px;
		margin-top: 20px;
		height: calc(100% - 140px);
	}

	#userAanlysis div.module:first-child {
		border-bottom: solid 4px #20a0ff;
	}

	#userAanlysis div.module:first-child>.title {
		color: #20a0ff;
	}

	#userAanlysis .tips {
		color: red;
		font-size: 12px;
	}

	#box1 {
		clear: both;
	}

	#userAanlysis .timeSelect {
		display: inline-block;
		margin-top: 15px;
	}

	#userAanlysis .search {
		margin: 0 0 15px 0;
	}

	#userAanlysis .infoBox {
		color: #333333;
		font-size: 12px;
		background-color: #f2f2f2;
		min-height: 40px;
		line-height: 40px;
		padding-left: 20px;
		margin-bottom: 15px;
	}

	#userAanlysis .qizhiDate {
		float: right;
		font-size: 12px;
		border-radius: 0;
		margin-right: 34px;
		margin-top: 12px;
	}

	#userAanlysis .tubiao-title {
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		color: #4d4d4d;
		background-color: #f6f6f6;
		padding-left: 20px;
	}

	#userAanlysis .nodata {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 50%;
		left: 50%;
	}
</style>